<template>
  <div>
    <el-container class="ly-wrapper" v-loading.fullscreen.lock="loadStore.load > 0">
      <el-header height="50px">
        <el-col :span="30">
            <p class="ly-title">邯郸学院HS系统</p>
          </el-col>
          <el-col :span="19" style="text-align: right; margin-right: 30px;">
            <img :src="n" alt="头像" class="avatar" />
            <span>姓名：{{employee.realname}}</span>
            <el-button v-show="showLogout" style="background-color: brown; margin-left: 20px;" type="default" @click="logout">退出登录</el-button>
          </el-col>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <LyMenu></LyMenu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup >
import { ref, reactive } from 'vue'
import LyMenu from './menu/index.vue';
import VueCookie from 'vue-cookie'
import router from '@/router'
import { useLoadStore } from '@/stores/counter';
import { EmployeeStore } from '@/stores/counter'
const loadStore = useLoadStore();
const employeeStore = EmployeeStore()
const employee = employeeStore.get()


function logout(){
  VueCookie.delete('token')
  employeeStore.reset();
  router.push('/login') // 重定向到登录页面
}
</script>


<style lang='scss' scoped>
.ly-wrapper{
    height: 100vh;
    min-width: 1300px;
    .el-header{
        background-color: #20A0FF;
        color: #fff;
        display: flex; //置元素的显示方式为弹性布局（flex）
        align-items: center;//垂直居中
        .ly-title{
          /**
          * rem: 相对于根元素（html）的字体大小。
          * 1rem = 16px(默认)，在全局样式里面可设置，app.vue中设置html的font-size: ? px;
          * 字体大小必须使用rem，
          */
            font-size: 1.25rem;
            font-weight: 700;
        }
    }
    .el-main{
    background-color: #E9EEF3;
  }
}

</style>